<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取DIV的位置坐标的三种方法！</title>
</head>
<body>

<script type="text/javascript">
    //方法一：
    var odiv=document.getElementById('divid');
    alert(odiv.getBoundingClientRect().left);
    alert(odiv.getBoundingClientRect().top);

    /*****************************************************************************************************/
    //方法二：
    function CPos(x, y)
    {
        this.x = x;
        this.y = y;
    }
    /**
     * 得到对象的相对浏览器的坐标
     */
    function GetObjPos(ATarget)
    {
        var target = ATarget;
        var pos = new CPos(target.offsetLeft, target.offsetTop);

        var target = target.offsetParent;
        while (target)
        {
            pos.x += target.offsetLeft;
            pos.y += target.offsetTop;

            target = target.offsetParent
        }
        return pos;
    }

    var obj =  document.getElementById('divid')
    alert(GetObjPos(obj)['x'])//x坐标
    alert(GetObjPos(obj)['y'])//y坐标

    /*****************************************************************************************************/
    //方法三：
    function getElementPos(elementId){
        var ua = navigator.userAgent.toLowerCase();
        var isOpera = (ua.indexOf('opera') != -1);
        var isIE = (ua.indexOf('msie') != -1&& !isOpera); // not opera spoof
        var el = document.getElementById(elementId);
        if(el.parentNode === null|| el.style.display == 'none') {
            returnfalse;
        }
        var parent =null;
        var pos = [];
        var box;
        if(el.getBoundingClientRect) //IE
        {
            box = el.getBoundingClientRect();
            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
            var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
            return {
                x: box.left + scrollLeft,
                y: box.top + scrollTop
            };
        }
        else
        if (document.getBoxObjectFor)// gecko
        {
            box = document.getBoxObjectFor(el);
            var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) :0;
            var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) :0;
            pos = [box.x - borderLeft, box.y - borderTop];
        }
        else // safari & opera
        {
            pos = [el.offsetLeft, el.offsetTop];
            parent = el.offsetParent;
            if (parent != el) {
                while (parent) {
                    pos[0] += parent.offsetLeft;
                    pos[1] += parent.offsetTop;
                    parent = parent.offsetParent;
                }
            }
            if (ua.indexOf('opera') != -1|| (ua.indexOf('safari') != -1&& el.style.position == 'absolute'))
            {
                pos[0] -= document.body.offsetLeft;
                pos[1] -= document.body.offsetTop;
            }
        }
        if(el.parentNode) {
            parent = el.parentNode;
        }
        else{
            parent = null;
        }
        while(parent && parent.tagName != 'BODY'&& parent.tagName != 'HTML') {// account for any scrolled
            ancestors
            pos[0] -= parent.scrollLeft;
            pos[1] -= parent.scrollTop;
            if (parent.parentNode) {
                parent = parent.parentNode;
            }
            else {
                parent = null;
            }
        }
        return{
            x: pos[0],
            y: pos[1]
        };
    }
    var xd = getElementPos("divid");
    alert(xd.x);
    alert(xd.y);
</script>
</body>
</html>
